import {
  DrawerForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import type { FC } from 'react';
import { useModel } from 'umi';

import { MyDynamicField } from '@/components/MyUI';

type FormProps = {
  visible: boolean;
  current: API.ProductParam | undefined;
  onCancel: () => void;
  onSubmit: (values: API.ProductParam) => Promise<void>;
};

const Form: FC<FormProps> = (props) => {
  const { visible, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  return (
    <DrawerForm<API.ProductParam>
      visible={visible}
      autoFocusFirstInput
      width={640}
      title={`${current ? '编辑' : '添加'}产品配置`}
      initialValues={current}
      //preserve={false}
      // trigger={<>{children}</>}
      onFinish={onSubmit}
      drawerProps={{
        onClose: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        name="productId"
        label="产品"
        options={productOptions}
        readonly={true}
      />
      <ProFormText name="name" label="名称" readonly={true} />
      <ProFormText name="paramKey" label="参数名" readonly={true} />
      <MyDynamicField
        name="paramValue"
        label={`参数值${current?.valueType == 'string[]' ? '(多项换行)' : ''}`}
        min={current?.minValue}
        max={current?.maxValue}
        // rules={[{ required: true, message: '请输入参数值' }]}
        myFieldType={current?.valueType}
      />
      <ProFormDigit
        name="sort"
        label="排序"
        wrapperCol={{ span: 4 }}
        min={0}
        max={9999}
        fieldProps={{ defaultValue: 0 }}
      />
      <ProFormTextArea name="remark" label="备注" fieldProps={{ rows: 8 }} />
    </DrawerForm>
  );
};

export default Form;
